<script>
import MAIN_STORE from "@/store/store.js";
import { MeasureLength, MeasureArea, MeasureAttr, MeasurePick } from "@/utils/Measure";
let measureLengthIns = null;
let measureAreaIns = null;
export default {
  /**
   * 图层工具方法
   * 距离量算 面积量算 标注 属性查询
   */
  name: "layer-tool",
  components: {},
  data() {
    return {
      activeFunctions: [],
      positionForm: {
        longitude: 120,
        latitude: 30,
      },
    };
  },
  computed: {
    showComponent() {
      return ["Search", "Decision"].indexOf(this.$route.name) !== -1;
    },
  },
  watch: {
    showComponent(nV) {
      if (!nV) {
        this.clearAddedLayer();
      }
    },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() { },
  methods: {
    // 测量距离
    doMeasureLength() {
      this.unbindAttrTrigger();
      const index = this.activeFunctions.indexOf("length");
      const indexArea = this.activeFunctions.indexOf("area");
      if (indexArea !== -1) {
        measureAreaIns && measureAreaIns.clear();
      }
      if (index === -1) {
        this.activeFunctions.push("length");
        measureLengthIns = new MeasureLength({
          map: MAIN_STORE.GLOBAL_MAP_INS,
        });
        measureLengthIns.handleClickCalcDistance();
      } else {
        this.activeFunctions.splice(index, 1);
        measureLengthIns && measureLengthIns.destroy();
        measureLengthIns = null;
      }
    },
    // 测量面积
    doMeasureArea() {
      this.unbindAttrTrigger();
      const index = this.activeFunctions.indexOf("area");
      const indexLength = this.activeFunctions.indexOf("length");
      if (indexLength !== -1) {
        measureLengthIns && measureLengthIns.clear();
      }
      if (index === -1) {
        this.activeFunctions.push("area");
        measureAreaIns = new MeasureArea({
          map: MAIN_STORE.GLOBAL_MAP_INS,
        });
        measureAreaIns.handleClickCalcArea();
      } else {
        this.activeFunctions.splice(index, 1);
        measureAreaIns && measureAreaIns.destroy();
        measureAreaIns = null;
      }
    },
    // 属性/当前经纬度的查询
    doGetAttr() {
      const indexLength = this.activeFunctions.indexOf("length");
      const indexArea = this.activeFunctions.indexOf("area");
      if (indexLength !== -1) {
        measureLengthIns && measureLengthIns.clear();
      }
      if (indexArea !== -1) {
        measureAreaIns && measureAreaIns.clear();
      }

      const indexAttr = this.activeFunctions.indexOf("attr");
      if (indexAttr !== -1) {
        this.activeFunctions.splice(indexAttr, 1);
      } else {
        this.activeFunctions.push("attr");
      }

      let ins = MeasureAttr.getIns();
      if (!ins) {
        ins = MeasureAttr.create({
          map: MAIN_STORE.GLOBAL_MAP_INS,
          overlayLimit: 1,
        });
      } else {
        this.unbindAttrTrigger();
      }
    },
    // 解绑经纬度属性查询
    unbindAttrTrigger() {
      const ins = MeasureAttr.getIns();
      ins && ins.destroy();
      const indexAttr = this.activeFunctions.indexOf("attr");
      if (indexAttr !== -1) {
        this.activeFunctions.splice(indexAttr, 1);
      }
    },
    // 查询管线管点
    doGetPick() {
      const indexPick = this.activeFunctions.indexOf("pick");
      if (indexPick !== -1) {
        this.activeFunctions.splice(indexPick, 1);
      } else {
        this.activeFunctions.push("pick");
      }

      let ins = MeasurePick.getIns();
      if (!ins) {
        ins = MeasurePick.create({
          map: MAIN_STORE.GLOBAL_MAP_INS,
          overlayLimit: 1,
        });
      } else {
        this.unbindPickTrigger();
      }
    },
    unbindPickTrigger() {
      const ins = MeasurePick.getIns();
      ins && ins.destroy();
      const indexPick = this.activeFunctions.indexOf("pick");
      if (indexPick !== -1) {
        this.activeFunctions.splice(indexPick, 1);
      }
    },
    // 定位
    doLocateHere() {
      this.$store.commit("LOCATION_CERTAIN_VIEW", {
        position: [this.positionForm.longitude, this.positionForm.latitude],
      });
    },
    // 定位初始视角
    doLocateHereOrigin() {
      this.$store.commit("LOCATION_ORIGIN_VIEW");
    },
    clearAddedLayer() {
      // 销毁距离测量
      this.activeFunctions = [];
      measureLengthIns && measureLengthIns.destroy();
      measureLengthIns = null;

      // 销毁面积测量
      measureAreaIns && measureAreaIns.destroy();
      measureAreaIns = null;

      // 销毁点击查询经纬度(坐标属性查询)
      this.unbindAttrTrigger();
      // 销毁点击定位查询
      this.unbindPickTrigger();
    },
    init() {
      // setTimeout(() => {
      //   this.doGetPick();
      // }, 1000)
    },
    async doPrint() {
      // https://blog.csdn.net/w131552/article/details/143831772
      const canvas = await html2canvas(document.getElementById('map-container'), {
        useCORS: true,
        scale: 1,
        allowTaint: true,
      });
      // const pdf = new jspdf.jsPDF({
      //   orientation: 'landscape',
      //   unit: 'px',
      //   format: [canvas.width, canvas.height],
      // });
      // pdf.addImage(
      //   canvas.toDataURL('image/png'),
      //   'PNG',
      //   0,
      //   0,
      //   canvas.width,
      //   canvas.height
      // );
      // pdf.save('map_export.pdf');
      // 导出图片
      setTimeout(() => {
        const blob = canvas.toDataURL('image/png').split(',')[1];
        fetch('data:application/octet-stream;base64,' + blob)
          .then(response => response.blob())
          .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'map.png';
            link.click();
          });
      }, 0)
    }
  },
};
</script>

<template>
  <div class="layer-tool-container" :class="[showComponent ? 'show' : '']">
    <div class="layer-tool-group">
      <div class="layer-tool-item" @click="doPrint">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-print"></i>
        </div>
        <span class="title font-alimamashuheiti">打印</span>
      </div>
      <div class="layer-tool-item" :class="[activeFunctions.indexOf('length') !== -1 ? 'active' : '']"
        @click="doMeasureLength">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-distance"></i>
        </div>
        <span class="title font-alimamashuheiti">距离量算</span>
      </div>
      <div class="layer-tool-item" :class="[activeFunctions.indexOf('area') !== -1 ? 'active' : '']"
        @click="doMeasureArea">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-area"></i>
        </div>
        <span class="title font-alimamashuheiti">面积量算</span>
      </div>
      <div class="layer-tool-item">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-flag"></i>
        </div>
        <span class="title font-alimamashuheiti">扯旗标注</span>
      </div>
      <div class="layer-tool-item" :class="[activeFunctions.indexOf('attr') !== -1 ? 'active' : '']" @click="doGetAttr">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-location"></i>
        </div>
        <span class="title font-alimamashuheiti">坐标·属性</span>
      </div>
      <el-popover placement="right-start" title="坐标定位" :width="200" trigger="hover"
        content="this is content, this is content, this is content">
        <template #reference>
          <div class="layer-tool-item">
            <div class="icon">
              <i class="iconfont-pipe icon-pipe-position"></i>
            </div>
            <span class="title font-alimamashuheiti">坐标定位</span>
          </div>
        </template>
        <div class="">
          <el-form size="small" :model="positionForm" label-width="40px" style="max-width: 600px">
            <el-form-item label="经度">
              <el-input v-model="positionForm.longitude" />
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model="positionForm.latitude" />
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button size="small" type="primary" @click="doLocateHereOrigin">定位初始视角</el-button>
            <el-button size="small" type="primary" @click="doLocateHere">确定</el-button>
          </div>
        </div>
      </el-popover>

      <div class="layer-tool-item" :class="[activeFunctions.indexOf('pick') !== -1 ? 'active' : '']" @click="doGetPick">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-pointer"></i>
        </div>
        <span class="title font-alimamashuheiti">点击定位</span>
      </div>
    </div>
    <div class="layer-tool-group">
      <div class="layer-tool-item" @click="clearAddedLayer">
        <div class="icon">
          <i class="iconfont-pipe icon-pipe-clear"></i>
        </div>
        <span class="title font-alimamashuheiti">清除图层</span>
      </div>
    </div>
    <input id="holder-element" type="text">
    <!-- <information-normal></information-normal> -->
  </div>
</template>
<style>
#helpTxt,
.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}

.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.ol-tooltip-static {
  background-color: #20ba11;
  color: #fff;
  opacity: 1;
  border: 1px solid white;
}

.ol-tooltip-measure:before,
.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.ol-tooltip-static:before {
  border-top-color: #20ba11;
}
</style>
<style lang="less" scoped>
.layer-tool-container {
  pointer-events: all;
  position: fixed;
  width: 6rem;
  top: 11rem;
  left: 2rem;
  display: none;

  &.show {
    display: initial;
  }

  &>.layer-tool-group {
    background-color: #fff;
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);

    &:last-of-type {
      margin-top: 2rem;
    }

    &>.layer-tool-item {
      cursor: pointer;
      height: 6rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;

      &:not(:last-of-type) {
        border-bottom: 1px dashed #afafaf;
      }

      &.active,
      &:hover {
        background-color: rgba(33, 104, 178, 0.2);

        &>span {
          color: #2168b2;
        }
      }

      &>.icon {
        font-size: 2.4rem;
        color: #2168b2;
      }

      &>span {
        font-size: 1.2rem;
      }
    }
  }
}

#holder-element {
  position: relative;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  border: none;
}
</style>
